<template>
  <div>
    <h2>{{ msg }}</h2>
    <button @click="go">开</button>
    <button @click="stop">关</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: "你好，哈哈哈，呵呵，呼呼呼，啧啧啧",
      //   设置开关初始值为关
      flag: false,
      //   设置定时器，但是不赋值
      id: "",
    };
  },
  methods: {
    go() {
      if (this.flag === false) {
        this.flag = true;
        if (this.flag === true) {
          this.id = setInterval(this.run, 300);
        }
      }
    },
    stop() {
      if (this.flag === true) {
        clearInterval(this.id);
        this.id = "";
        this.flag = false;
      }
    },
    run() {
      this.msg = this.msg.substr(1, this.msg.length) + this.msg.substr(0, 1);
    },
  },
};
</script>

<style scoped></style>
